<template>
  <view class="br-8 ticket-info pa-16 mb-12">
    <view class="disFlxJS" style="align-items: flex-start">
      <!-- 左边 -->
      <view class="flex-1">
        <view class="mb-8 disFlxAC">
          <text class="label-color fz-18 flex-shrink-0">
            {{ registerInfo?.personName }}
          </text>
          <text
            v-if="registerInfo?.ticketName"
            class="ticket-tag br-2 px-8 py-2 fz-12 ml-8 ov-1"
            style="max-width: 400rpx"
          >
            {{ registerInfo?.ticketName }}
          </text>
        </view>
        <view class="gray-color fz-14">
          <text>{{ registerInfo?.personTel }}</text>
        </view>
        <view v-if="arrangeVoList.length" class="mt-16" @click="toSeatArrangementList">
          <template v-for="(v, i) in arrangeVoList" :key="i">
            <view
              class="px-6 py-2 fz-10 label-color br-2 mb-8"
              style="background-color: #f2f3f5; width: fit-content"
            >
              <text>{{ v.name }}</text>
              <text class="ml-8">{{ v.displayName }}</text>
            </view>
          </template>
          <view
            v-if="
              registerInfo?.arrangeVoList &&
              registerInfo.arrangeVoList.length > arrangeVoList.length
            "
            class="gray-color fz-12 disFlxAC"
          >
            <text>全部安排</text>
            <text class="ali-icon ml-4">&#xe67e;</text>
          </view>
        </view>
      </view>
      <!-- 右边 -->
      <view v-if="registerInfo" class="disFlxCC">
        <view class="consumeNo-url">
          <TImage
            v-if="
              (registerInfo.approvalStatus === ApprovalStatusEnum.REJECT ||
                registerInfo.approvalStatus === ApprovalStatusEnum.UNDERREVIEW) &&
              !registerInfo.consumeNoUrl
            "
            class="status-view"
            src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/code-not-generate-icon.png"
            width="100%"
            height="100%"
          />
          <TImage
            v-else-if="
              registerInfo.approvalStatus === ApprovalStatusEnum.CANCEL ||
              registerInfo.approvalStatus === ApprovalStatusEnum.CANCELING ||
              registerInfo.approvalStatus === ApprovalStatusEnum.REJECT
            "
            class="status-view"
            src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/canceled-icon.png"
            width="100%"
            height="100%"
          />
          <TImage
            v-else-if="registerInfo.signStatus === SignStatusEnum.YES_SIGN"
            class="status-view"
            src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/signed-icon.png"
            width="100%"
            height="100%"
          />

          <TImage :src="registerInfo.consumeNoUrl" width="100%" height="100%" preview />
        </view>
        <view class="fz-12 fw-7 mt-8">
          <text user-select>{{ registerInfo?.consumeNo }}</text>
        </view>
      </view>
    </view>

    <view class="my-16 h-1" style="background-color: #ebedf0"></view>
    <view class="disFlxAC flexEnd">
      <slot />
    </view>
  </view>
</template>

<script setup lang="ts">
  import { computed, type PropType } from 'vue';
  import type { ActivityRegisterTicketUnion, ActivityShortDetailVo } from '@/api/order/types';
  import { navigateTo } from '@/router';
  import { ApprovalStatusEnum, SignStatusEnum } from '@/enums/activityStatusEnum';
  import TImage from '@/components/TImage/index.vue';

  const props = defineProps({
    registerInfo: Object as PropType<ActivityRegisterTicketUnion>,
    activityInfo: Object as PropType<ActivityShortDetailVo>,
  });

  const emits = defineEmits(['refresh']);

  const arrangeVoList = computed(() => {
    const list = props.registerInfo?.arrangeVoList || [];
    return list.slice(0, 2);
  });

  /** 跳转排座信息列表 */
  function toSeatArrangementList() {
    navigateTo({
      name: 'activityScheduling',
      options: {
        sceneType: 'attendanceCard',
        activityId: props.activityInfo?.activityId,
        activityRegisterId: props.registerInfo?.id,
      },
    });
  }
</script>

<style lang="scss" scoped>
  .label-color {
    color: #333;
  }

  .value-color {
    color: #666664;
  }

  .gray-color {
    color: #969799;
  }

  .register-info {
    background-color: #fff4e7;
    border: 1px solid transparent;
  }

  .ticket-info {
    border: 1px solid #ebedf0;
    background-color: #fff;
    .ticket-tag {
      background-color: #d0f7ff;
      color: #2878ff;
    }
  }

  .consumeNo-url {
    width: 144rpx;
    height: 144rpx;
    position: relative;
    .status-view {
      width: 100%;
      height: 100%;
      position: absolute;
      inset: 0;
    }
  }
</style>
